<!-- 到期设备 -->
<template>
  <div class="app-container" ref="documentAssistant">
    <div class="titleMolde">告警管理
    </div>
    <div class="Filters">

      <el-input v-model="queryParams.deviceCode" style="width: 130px" placeholder="设备编号" />
      <!-- <el-input v-model="queryParams.count" style="width: 130px" placeholder="报警次数" /> -->
      <!-- <el-input v-model="queryParams.alarmCode" style="width: 130px" placeholder="报警编号" /> -->
      <el-select v-model="queryParams.status" placeholder="处理状态" style="width: 100px" clearable>
        <el-option v-for="item in statusoptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-select v-model="deviceName" placeholder="设备类型" style="width: 100px" @change="changeoption" clearable>
        <el-option v-for="item in deviceoptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-select v-model="queryParams.alarmCode" placeholder="报警类型" style="width: 100px" clearable>
        <el-option v-for="item in typeoptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-button type="primary" size="small" @click="handleQuery">搜索</el-button>
      <el-button type="primary" size="small" @click="dispose(1, '')"
        v-hasPerm="['warining:Batchprocessing']">批量处理</el-button>
      <el-button type="primary" size="small" @click="copyID(1)">复制ID</el-button>
      <el-button type="primary" size="small" @click="copyID(2)">复制BT码</el-button>
      <el-button type="primary" size="small" class="mrg-lf-10" v-hasPerm="['warining:ExportExcel']">导出Excel</el-button>
    </div>
    <el-table v-loading="loading" :data="pageData.data" @selection-change="handleSelectionChange"
      :max-height="tableHeight">
      <el-table-column label="序号" align="center" type="selection" width="60" />
      <el-table-column label="设备编号" align="center" prop="deviceCode" />
      <el-table-column label="报警类型" align="center" prop="alarmName" />
      <el-table-column label="报警次数" align="center" prop="count" />
      <el-table-column label="设备编号(BT码)" align="center" prop="towerNumber" />
      <el-table-column label="报警编号" align="center" prop="alarmCode" />

      <el-table-column label="处理状态" align="center">
        <template v-slot="scope">
          {{ scope.row.status === 'UNPROCESSED' ? '未处理' : '已处理' }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="latestAlarmTime"></el-table-column>

      <el-table-column label="操作" fixed="right" width="220">
        <template #default="scope">
          <!-- <el-button  type="primary" size="small" link>
            曲线
          </el-button> -->
          <el-button type="primary" @click="dispose(0, scope.row)" size="small" v-hasPerm="['warining:Tagprocessing']"
            link>
            标记处理
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination @pagination="handleQuery" v-if="queryParams.pages.total > 0" v-model:total="queryParams.pages.total"
      v-model:page="queryParams.pages.current" v-model:limit="queryParams.pages.size" />
  </div>
</template>

<script setup lang="ts">
import type { TabsPaneContext } from "element-plus";
import LogAPI, { LogPageVO, LogPageQuery } from "@/api/log";
import deviceAlarmApi, { SelectByPageParams, Alarmtype } from "@/api/deviceAlarm";
import managerAlarmApi, { } from "@/api/manageralarm";
import DeviceTypeApi, { typeOptions } from "@/api/deviceType"

import useClipboard from 'vue-clipboard3'
let deviceoptions = ref<typeOptions[]>([]);
let typeoptions = ref<typeOptions[]>([]);

let tableHeight = ref(600);
const loading = ref(false);
const removeIds = ref([]);
let pageData = reactive<Alarmtype>(
  {
    "data": [
      {
        "id": "66f923614991a5159355bdbd",
        "deviceId": '1839282463873126400',
        "alarmCode": "100",
        "count": 4,
        "status": "UNPROCESSED",
        "latestAlarmTime": "2024-10-22 16:14:50",
        "createTime": "2024-09-29 17:52:33",
        "deviceCode": "123456",
        "towerNumber": "tower",
        "alarmName": "测试告警"
      }
    ],
    "total": 1,
    "size": 10,
    "current": 1
  }
)
let deviceName = ref('')
const statusoptions = [
  {
    value: "UNPROCESSED",
    label: "未处理",
  },
  {
    value: "PROCESSED",
    label: "已处理",
  },

];


// 获取单个documentAssistant
const documentAssistant = ref<HTMLElement | null>(null);


/** 用户查询参数  */
const props = defineProps({
  ld: {
    type: String,
    required: true,
  },
});
let customerId = props.ld
console.log('customerIdcustomerId', customerId);
let queryParams = reactive<SelectByPageParams>({
  pages: {
    current: 1,
    size: 10,
    startTime: "",
    endTime: "",
    total: 0,
    orders: [
      {
        column: "",
        asc: true
      }
    ]
  },
  customerId: customerId,
  keyWord: "",
  alarmCode: "",
  child: true,
  deviceCode: '',
  towerNumber: '',
  count: '',
  status: '',
  alarmName: ''

});
// 监听 message 的变化 
watch(() => props.ld, (newMessage, oldMessage) => {
  console.log(66666666, newMessage, oldMessage);
  if (newMessage !== oldMessage) {
    console.log('chengg');
    queryParams.customerId = newMessage
    handleQuery()
  }

});
interface SelType {
  deviceTypeId: string;
  deviceTypeCode: string;

  id: string;
  towerNumber?: string
}

let selalarmlist = reactive<SelType[]>([]);
function dispose(type: any, row: any) {
  console.log(row, 'wwwwwwwwww');
  let list = []
  if (type == 0) {
    let data = {
      deviceTypeCode: row.deviceTypeCode,
      id: row.id
    }
    list.push(data)

  } else {

    for (let i in selalarmlist) {
      let data = {
        deviceTypeCode: '',
        id: ''
      }
      data.deviceTypeCode = selalarmlist[i].deviceTypeCode
      data.id = selalarmlist[i].id
      list.push(data)

    }
  }
  if (list.length >= 1) {
    deviceAlarmApi.batchHandingAlarm(list).then(() => {
      ElMessage.success('标记处理成功')
      handleQuery();

    })
  } else {
    ElMessage.warning('请先选择处理的数据')
  }
}
/** 行复选框选中记录选中ID集合 */
function handleSelectionChange(selection: any) {
  selalarmlist = selection
  console.log(selalarmlist);

  removeIds.value = selection.map((item: any) => item.id);
}
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
// 清空函数
interface QueryParams {
  [key: string]: any; // 或者更具体的类型
}
const clearQueryParams = (queryParams: QueryParams) => {
  Object.keys(queryParams).forEach((key) => {
    if (queryParams[key] === '') {
      delete queryParams[key];
    } else if (queryParams[key] instanceof Object) {
      // 如果是对象，递归清理
      clearQueryParams(queryParams[key]);
    }
  });
};
// 复制编码
// 复制BT码 id
const { toClipboard } = useClipboard();

function copyID(type: any) {
  if (selalarmlist.length >= 1) {
    let text = ''
    if (type == 1) {
      for (let i in selalarmlist) {
        text += selalarmlist[i].id + "\n"; // 每个 id 后面加上换行符
      }
    } else {
      for (let i in selalarmlist) {
        text += selalarmlist[i].towerNumber + "\n"; // 每个 id 后面加上换行符
      }
    }
    toClipboard(text)
    ElMessage({
      message: '复制成功',
      type: 'success',
    })
  }
  else {
    ElMessage({
      message: '请先选择要复制内容的设备',
      type: 'warning',
    })
  }
}
/** 查询 */
let deviceTypeId = ref('')
function handleQuery() {
  loading.value = true;
  console.log(queryParams, '0000');

  clearQueryParams(queryParams);

  deviceAlarmApi.selectByPage(queryParams)
    .then((data) => {
      pageData = data;
      loading.value = false;
      console.log('分页', data);
      queryParams.pages.total = data.total;
      queryParams.pages.current = data.current;
    })
    .finally(() => {

    });
}
// 修改设备类型
function changeoption(e: any) {

  managerAlarmApi.alarmoptions(e).then((data) => {
    console.log(data);
    queryParams.alarmName = ''
    typeoptions.value = data
  })
}
/** 查询设备类型下拉列表 */
function deviceTypeOptions() {
  DeviceTypeApi.deviceTypeOptions()
    .then((data) => {

      deviceoptions.value = data;
      console.log(data, '999', deviceoptions.value);

    })
    .finally(() => {
    });
}

onMounted(() => {
  handleQuery();
  deviceTypeOptions();
  tableHeight.value = (documentAssistant.value as HTMLElement).clientHeight - 65 - 24 - 52 - 20;

});
</script>
<style lang="scss" scoped>
.mrg-lf-10 {
  margin-left: 10px;
}

.titleMolde {
  font-weight: bold;
  position: relative;
  display: flex;
  padding-left: 15px;
  justify-content: space-between;
  align-items: center;

  &::after {
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
    left: 4px;
    top: 6px;
    background: #2cdfe5b5;
  }

  &::before {
    content: "";
    width: 8px;
    height: 8px;
    background: #09e0e7;
    position: absolute;
    left: 0;
    top: 2px;
  }

}

.app-container {
  position: relative;
  padding: 10px;
  height: 100%;
  box-sizing: border-box;

  .allTabContent {
    display: flex;
    align-items: center;
    position: absolute;
    top: 15px;
    right: 0;

    div {
      margin-left: 26px;
      font-weight: 700;

      span {
        margin-left: 8px;
      }
    }
  }
}

.Filters {
  margin: 10px 0;
  display: flex;
  align-items: center;

  .el-segmented {
    --el-segmented-item-selected-color: var(--el-text-color-primary);
    --el-segmented-item-selected-bg-color: #5cadff;
    --el-border-radius-base: 16px;
  }

  &>div {
    margin-right: 5px;
  }
}
</style>
